<template>
  <div class='page-content'>
          <el-button type="primary"  icon="el-icon-plus" @click="showDialog('add')">新增</el-button>

      <el-table
        :loading="loading"
        :page="page"
        :data="userList" style="margin-top: 10px;">
        <el-table-column label="版本号" prop="version"  align="center"/>
        <el-table-column label="下载地址" prop="url"  align="center"/>
        <el-table-column label="强制更新" prop="isForce"  align="center">
          <template v-slot="scope">
            <div>{{scope.row.isForce === 1?'强制更新':'不强制更新'}}</div>
          </template>
        </el-table-column>
        <el-table-column label="更新时间" prop="updateTime" align="center"/>
        <el-table-column fixed="right" label="操作" width="350px" align="center">
          <template slot-scope="scope">
            <el-button  size="mini" type="primary"  @click="showDialog('edit',scope)">
              修改
            </el-button>
            <el-button size="mini"  style="background-color: #9CB0C5;color: #fff"  @click="deleteUser(scope)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    <EnteringForm ref="enteringForm"
                  :edit="edit"
                  v-bind="dialog"
                  :form="form"
                  :rules="rules"
                  @getList="getList"
                  @close="close"
                  @submit="submit"
                  labelWidth="120px"/>
  </div>
</template>

<script>
import EnteringForm from  '../appVersion/EnteringForm.vue'
import { appVersionDelete, appVersionPage,getAppVersionDetail } from '@/api/modular/system/loginManage'
// import {
//   deleteAppVersion,
//   findAppVersionPageList, getAppVersionDetail
// } from '@/api/regionalManagement.js'
export default {
  name: "version",
  components: {EnteringForm},

  data () {
    return {
      loading: false,
      edit:'',
      page: {
        pageNo: 1,
        pageSize: 10
      },
      dialog:{
        visible:false,
        title: '添加'
      },
      form: {
        version: '',
        url: '',
        isForce: '',
        fileList:[]
      },
      userList: [],
      labels: {
        version: 'app版本',
        url: '下载地址',
        isForce: '强制更新'
      },
    };
  },
  computed: {
    rules() {
      const rules = {}
      Object.keys(this.form).forEach(key=> {
        rules[key] = [{
          required: true, message: `请输入${this.labels[key]}`,trigger: 'blur'
        }]
      })

      return rules

    },
  },
  created() {
    this.getList()
  },
  methods: {
    // 分页
    changePage(page){
      page.page? this.page.pageNo = page.page : this.page.pageSize = page.limit
      this.getList()
    },
    // 获取列表
    getList(){
      this.loading = true;
      let query = {
        queryParam: {},
        page:{
          pageNo: 1,
          pageSize: 99,
        }
      }
      appVersionPage(query).then(response =>{
        this.userList = response.data.rows
        this.page.pageNo = response.data.pageNo
        this.page.pageSize = response.data.pageSize
        this.page.total = response.data.totalRows
      }).finally(() => {
        this.loading = false;
      });
    },
    // 打开弹窗
    showDialog(type,scope) {
      this.dialog.visible = true
      if (type === 'add'){
        this.edit = ''
        this.dialog.title = '新增APP版本'
        setTimeout(() => {
          this.$refs.enteringForm.$refs.form.resetFields();
        }, 100);
      }else {
        this.dialog.title = '修改APP版本'
        this.edit = 'edit'
        this.form.fileList = []
        setTimeout(() => {
          this.$refs.enteringForm.$refs.form.resetFields();
        }, 100);
        getAppVersionDetail({
          id:scope.row.id
        }).then(response =>{
          this.form.version = response.data.version
          this.form.isForce = response.data.isForce
          this.form.id = response.data.id
          this.form.url = response.data.url
          this.form.fileList.push({
            url: response.data.url,
            uid: 1001,
            name: response.data.url.split('/')[response.data.url.split('/').length - 1],
            status: 'done',
          })
        })
      }
    },
    close() {
      this.dialog.visible = false
    },
    submit() {
      this.dialog.visible = false
    },
    // 删除
    deleteUser(scope) {
      this.$confirm('您确定要删除当前内容吗', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'error'
      }).then(() => {
        appVersionDelete({
          id:scope.row.id,
          delFlag: 3
        }).then(response =>{
          this.$message.success('删除成功')
          this.getList()
        })
      }).catch(() => {
      })
    },
    changeColumn(columns) {
      this.columns = columns
      this.$refs.table.doLayout()
    }
  }
}
</script>

<style lang='scss' scoped>
.page-content {
  width: 100%;
  height: 100%;

  .avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
  }
}
::v-deep .el-dialog__header {
  padding: 0 !important;
  height: 66px;
  background: linear-gradient(
      148deg,
      #3aa1fe 0%,
      #4679fe 28%,
      #3aa1fe 54%,
      #3aa1fe 79%,
      #1753e2 100%
  );
}

::v-deep .el-dialog__body {
  padding-top: 40px !important;
}

::v-deep .el-dialog__footer {
  padding: 0 0 30px !important;
  border: none !important;
}

.title-wrapper {
  position: relative;
  height: 66px;
  display: flex;
  align-items: center;
  justify-content: center;

  .close-icon-wrapper {
    position: absolute;
    left: 0;
    top: 0;

    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 66px;
    color: #fff;
    //font-size: $xxl-font-size;
    cursor: pointer;
  }

  .title-text {
    //font-size: $lg-font-size;
    color: #ffffff;
  }
}

.dialog-footer {
  display: flex;
  justify-content: center;

  .confirm-btn {
    margin-right: 120px;
    width: 150px;
    height: 42px;
    background: #3aa1fe;
    border-radius: 4px 4px 4px 4px;
    color: #ffffff;
  }

  .cancel-btn {
    width: 150px;
    height: 42px;
    background: #9cafc6;
    border-radius: 4px 4px 4px 4px;
    color: #ffffff;
  }
}
</style>
